
<template>
  <div class="box">
    <!-- <img src="../../assets/imgs/adv1.jpg" class="adv" alt="" /> -->
    <img :src="titleimg" class="adv" alt="" />
 
    <p class="type">
      <span         
       ><a href="#title1">Node 系列</a></span>
      <span><a href="#title2">Redmi 数字系列</a></span>
      <span><a href="#title3">Redmi K系列</a></span>
      <span>Xiaomi 手机配件</span>
    </p>
    <div class="goods-show">
      <p class="show-title" id="title1">Node 系列</p>
      <div
        v-for="(goodsinfo, index) in goodsinfos"
        :key="index"
       
        class="show-box"
      >
        <div class="left-img"><img :src="goodsinfo.img" /></div>
        <div class="right-info">
          <p>{{ goodsinfo.name }}</p>
          <router-link   :to="`/Goods/GoodsDetail?id=${goodsinfo.id}`">
            <div>
              <p>
                ￥ <i>{{goodsinfo.price}}</i> 起
                <span>满减</span>
                <span>赠</span>
              </p>
            </div>
             </router-link>
        </div>
      </div>
      <p class="show-title" id="title3">XiaomiCiVi</p>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Redmi",
  data() {
    return {
      goodsinfos: "",
      goodsinfo: "",
      titleimg: "",
      arr1: "",
    };
  },
  created() {
    console.log("this.$route", this.$route.query.type); //匹配到当前路由对象；
    axios({
      url: "/goods?type1=redmi",
    }).then((res) => {
      console.log(res);
      this.goodsinfos = res.data;
      var arr1 = [this.arr[0].bigtype];
      for (let i = 0; i < this.arr.length; i++) {
        if (arr1.indexOf(this.arr[i].bigtype) == -1) {
          arr1.push(this.arr[i].bigtype);
        }
      }
      return arr1
    });

// axios.all([axios.get('api/books'),axios.get('api/readers')]).then(
//   axios.spread(function (books, readers) { 
//    //所有请求完毕后，调用该函数，books是第一个请求的结果，readers是第二个请求的结果
//    console.log(books.data);
//    console.log(readers.data);
//   })
//  );
       axios({
      url: "/goods?type1=xiaomi&type4=show"
    }).then((res) => {
      // console.log(res);
      this.goods = res.data;
     this.titleimg=this.goods[0].titleimg;
      
    });
    // axios({
    //   url: "/goods?type1=redmi&type4=show",
    // }).then((res) => {
    //   // console.log(res);
    //   this.goods = res.data;
    //   this.titleimg = this.goods[0].titleimg;
    //   console.log(this.goods[0].titleimg);
    // });
  },
};
</script>

<style scoped>
.box .adv {
  width: 2.5rem;
  height: 0.75rem;
 
}
.box {
  width: 2.6rem;
  min-height: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.6rem;
  background-color: white;
  overflow-y: auto;
}
.box a,
i {
  text-decoration: none;
  color: black;
  font-style: normal;
}
.box .type {
  width: 2.5rem;
  white-space: nowrap;
  overflow-x: auto;
  height: 0.44rem;
  line-height: 0.44rem;
  position: sticky;
  top: .3rem;
}
.box .type span {
  display: inline-block;
  padding: 0.04rem;
  margin-left: 0.1rem;
  font-size: 0.12rem;
  color: #737373;
  height: 0.2rem;
  border-radius: 0.1rem;
  line-height: 0.2rem;
}
.box .type span:hover {
  background-color: #f3f3f3;
}
.goods-show img {
  width: 0.6rem;
  height: 0.6rem;
  align-items: center;
  margin: 0.07rem;
}
.goods-show {
  display: flex;
  flex-direction: column;
  margin-top: 0.25rem;
}
.goods-show .show-box {
  width: 2.5rem;
  height: 0.75rem;
  background-color: #f8f8f8;
  display: flex;
  border-radius: 0.1rem;
  margin-top: 0.1rem;
}
.goods-show .show-title {
  font-size: 0.15rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
}
.goods-show .left-img {
  display: flex;
  justify-content: center;
}
.goods-show .right-info {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
}
.goods-show .right-info p {
  font-size: 0.15rem;
  /* margin-bottom: .1rem; */
}
.goods-show .right-info div p {
  font-size: 0.1rem;
}
.goods-show .right-info div i {
  font-size: 0.14rem;
}
.goods-show .right-info div span {
  color: orange;
  border: 1px solid orange;
  display: inline-block;
  border-radius: 0.03rem;
  margin-left: 0.1rem;
  padding: 0.01rem 0.02rem;
}
</style>
 